import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { PhotoGallery } from "@/components/photo-gallery";

import { notFound, redirect } from "next/navigation";

import { revalidatePath } from "next/cache";

import { serverCaller } from "@/lib/trpc/server";

import { saveUpload } from "@/lib/uploads";

import { cityTimeZone, fmtEventTime } from "@/lib/format";

export const dynamic = "force-dynamic";

const TYPE_LABEL: Record<string, string> = {

  set: "Set",

  weekender: "Weekender",

  class: "Class",

  workshop: "Workshop",

  competition: "Competition",

  special: "Special event",

  social: "Social",

};

function money(cents: number) {

  return cents === 0 ? "Free" : `$${(cents / 100).toFixed(2)}`;

}

function stamp(d: Date | null) {

  if (!d) return "";

  return new Date(d)

    .toLocaleString("en-US", {

      month: "short",

      day: "numeric",

      hour: "numeric",

      minute: "2-digit",

    })

    .toUpperCase();

}

export default async function EventPage({

  params,

}: {

  params: Promise<{ slug: string; id: string }>;

}) {

  const { slug, id } = await params;

  if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)) {

    notFound();

  }

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const event = await caller.event.byId({ id });

  if (!event) notFound();

  const tz = cityTimeZone(city.state);

  const ticketTypes = await caller.ticketType.list({ eventId: id });

  const featured =

    event.isPromoted &&

    (!event.boostedUntil || new Date(event.boostedUntil) > new Date());

  const comments = await caller.comment.list({

    subjectType: "event",

    subjectId: id,

  });

  const photos = await caller.eventPhoto.list({ eventId: id });

  const eventVendors = await caller.vendor.listForEvent({

    cityId: city.id,

    eventId: id,

  });

  async function reserve(formData: FormData) {

    "use server";

    const ticketTypeId = String(formData.get("ticketTypeId") ?? "");

    const quantity = Math.max(1, Math.min(10, Number(formData.get("quantity") ?? 1)));

    if (!ticketTypeId) return;

    await serverCaller().ticket.reserve({ ticketTypeId, quantity });

    redirect("/tickets");

  }

  async function addTicketType(formData: FormData) {

    "use server";

    const name = String(formData.get("name") ?? "").trim();

    const dollars = Number(formData.get("price") ?? 0);

    const capRaw = String(formData.get("capacity") ?? "").trim();

    if (!name) return;

    await serverCaller().ticketType.create({

      eventId: id,

      name,

      priceCents: Math.max(0, Math.round(dollars * 100)),

      capacity: capRaw ? Math.max(1, Number(capRaw)) : undefined,

    });

    revalidatePath(`/city/${slug}/event/${id}`);

  }

  async function boost() {

    "use server";

    await serverCaller().event.boost({ id, days: 14 });

    revalidatePath(`/city/${slug}/event/${id}`);

  }

  async function addComment(formData: FormData) {

    "use server";

    const body = String(formData.get("body") ?? "").trim();

    if (!body) return;

    await serverCaller().comment.create({

      subjectType: "event",

      subjectId: id,

      body,

    });

    revalidatePath(`/city/${slug}/event/${id}`);

  }

  async function submitPhoto(formData: FormData) {

    "use server";

    const file = formData.get("photo");

    const caption = String(formData.get("caption") ?? "").trim();

    if (!(file instanceof File) || file.size === 0) return;

    let url: string;

    try {

      url = await saveUpload(file, "image");

    } catch {

      return;

    }

    await serverCaller().eventPhoto.submit({

      eventId: id,

      url,

      caption: caption || undefined,

    });

    revalidatePath(`/city/${slug}/event/${id}`);

  }

  async function reportEvent(formData: FormData) {

    "use server";

    const reason = String(formData.get("reason") ?? "").trim();

    await serverCaller().flag.create({

      subjectType: "event",

      subjectId: id,

      reason: reason || undefined,

    });

    revalidatePath(`/city/${slug}/event/${id}`);

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href={`/city/${slug}`} className="kicker hover:text-gold">

        ← {city.name}

      </Link>

      <p className="kicker mt-10 text-ash">

        {(TYPE_LABEL[event.type] ?? event.type).toUpperCase()} · {fmtEventTime(event.startsAt, tz)} ·{" "}

        {city.name}

      </p>

      <h1 className="display mt-3 text-6xl sm:text-7xl">{event.title}</h1>

      {event.description ? (

        <p className="serif mt-6 max-w-xl text-xl text-bone">

          {event.description}

        </p>

      ) : null}

      {event.flyerUrl ? (

        <figure className="mt-10">

          <img

            src={event.flyerUrl}

            alt={`${event.title} flyer`}

            className="w-full border border-[var(--line)]"

          />

        </figure>

      ) : null}

      {event.externalUrl || event.ticketUrl || event.programUrl ? (

        <div className="mt-7 flex flex-wrap gap-4">

          {event.ticketUrl ? (

            <a

              href={event.ticketUrl}

              target="_blank"

              rel="noopener noreferrer"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Tickets →

            </a>

          ) : null}

          {event.externalUrl ? (

            <a

              href={event.externalUrl}

              target="_blank"

              rel="noopener noreferrer"

              className="kicker border border-[var(--line)] px-6 py-3 text-gold hover:border-gold hover:text-gold-bright"

            >

              Details →

            </a>

          ) : null}

          {event.programUrl ? (

            <a

              href={event.programUrl}

              target="_blank"

              rel="noopener noreferrer"

              className="kicker border border-[var(--line)] px-6 py-3 text-gold hover:border-gold hover:text-gold-bright"

            >

              Download the program (PDF) →

            </a>

          ) : null}

        </div>

      ) : null}

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Tickets</h2>

          {featured ? (

            <span className="kicker text-gold">★ Featured</span>

          ) : (

            <form action={boost}>

              <button type="submit" className="kicker text-ash hover:text-gold">

                Boost this event →

              </button>

            </form>

          )}

        </div>

        {ticketTypes.length === 0 ? (

          <p className="serif mt-6 text-xl text-ash">

            No tickets yet. Add a ticket type below, or it's free at the door.

          </p>

        ) : (

          <ul className="mt-6 flex flex-col gap-3">

            {ticketTypes.map((t) => {

              const left = t.capacity != null ? t.capacity - t.sold : null;

              const soldOut = left != null && left <= 0;

              return (

                <li

                  key={t.id}

                  className="flex items-center gap-4 border border-[var(--line)] px-5 py-4"

                >

                  <div className="flex-1">

                    <p className="display text-2xl">{t.name}</p>

                    <p className="kicker mt-1 text-ash">

                      {money(t.priceCents)}

                      {left != null ? ` · ${left} LEFT` : ""}

                    </p>

                  </div>

                  {soldOut ? (

                    <span className="kicker text-ash">Sold out</span>

                  ) : (

                    <form action={reserve} className="flex items-center gap-2">

                      <input type="hidden" name="ticketTypeId" value={t.id} />

                      <input

                        type="number"

                        name="quantity"

                        defaultValue={1}

                        min={1}

                        max={Math.min(10, left ?? 10)}

                        className="kicker w-16 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none focus:border-gold"

                      />

                      <button

                        type="submit"

                        className="kicker bg-gold px-5 py-2 text-stage hover:bg-gold-bright"

                      >

                        Reserve

                      </button>

                    </form>

                  )}

                </li>

              );

            })}

          </ul>

        )}

        {}

        <form action={addTicketType} className="mt-6 flex flex-wrap items-end gap-3">

          <input

            name="name"

            required

            placeholder="Ticket name (e.g. General, VIP)"

            className="serif flex-1 border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            type="number"

            name="price"

            step="1"

            min="0"

            placeholder="Price $"

            className="kicker w-24 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            type="number"

            name="capacity"

            min="1"

            placeholder="Qty (opt)"

            className="kicker w-24 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <button

            type="submit"

            className="kicker border border-[var(--line)] px-5 py-2 text-gold hover:border-gold"

          >

            Add ticket

          </button>

        </form>

        <p className="kicker mt-3 text-ash">

          Reserving is free while we turn on payments.

        </p>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Photos</h2>

          <span className="kicker text-ash">

            {String(photos.length).padStart(2, "0")} in the album

          </span>

        </div>

        {photos.length === 0 ? (

          <p className="serif mt-6 text-xl text-ash">

            No photos in the album yet. Were you there? Send yours in below.

          </p>

        ) : (

          <div className="mt-6">

            <PhotoGallery photos={photos} />

          </div>

        )}

        <form action={submitPhoto} className="mt-8 flex flex-wrap items-end gap-3">

          <label className="flex flex-1 flex-col gap-2">

            <span className="kicker text-ash">Send in your photos</span>

            <input

              type="file"

              name="photo"

              required

              accept="image/jpeg,image/png,image/webp"

              className="kicker border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none file:mr-3 file:border-0 file:bg-gold file:px-3 file:py-1 file:text-stage"

            />

          </label>

          <input

            name="caption"

            maxLength={200}

            placeholder="Caption (opt)"

            className="serif flex-1 border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <button

            type="submit"

            className="kicker bg-gold px-5 py-2 text-stage hover:bg-gold-bright"

          >

            Submit

          </button>

        </form>

        <p className="kicker mt-3 text-ash">

          JPEG, PNG, or WebP up to 8MB. Every photo is reviewed before it appears.

        </p>

      </section>

      {}

      {eventVendors.length > 0 ? (

        <section className="mt-16 border-t border-[var(--line)] pt-10">

          <div className="flex items-end justify-between">

            <h2 className="display text-3xl">Vendors</h2>

            <span className="kicker text-ash">On site at this event</span>

          </div>

          <ul className="mt-6 flex flex-col gap-3">

            {eventVendors.map((v) => (

              <li

                key={v.id}

                className="flex flex-wrap items-center gap-4 border border-[var(--line)] px-5 py-4"

              >

                <div className="flex-1">

                  <p className="display text-2xl">{v.name}</p>

                  <p className="kicker mt-1 text-ash">

                    {v.category ? v.category.toUpperCase() : "VENDOR"}

                  </p>

                  {v.description ? (

                    <p className="serif mt-2 text-lg text-bone">{v.description}</p>

                  ) : null}

                </div>

                {v.linkUrl ? (

                  <a

                    href={v.linkUrl}

                    target="_blank"

                    rel="noopener noreferrer"

                    className="kicker text-gold hover:text-gold-bright"

                  >

                    Visit →

                  </a>

                ) : null}

              </li>

            ))}

          </ul>

        </section>

      ) : null}

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">The Crowd</h2>

          <span className="kicker text-ash">

            {String(comments.length).padStart(2, "0")} comments

          </span>

        </div>

        <form action={addComment} className="mt-6 flex flex-col gap-3">

          <input

            name="body"

            required

            placeholder="Say something about the set"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2">

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Post comment

            </button>

          </div>

        </form>

        {comments.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            No comments yet. Be the first to speak on it.

          </p>

        ) : (

          <ul className="mt-8">

            {comments.map((c) => (

              <li

                key={c.id}

                className="border-b border-[var(--line)] py-6"

              >

                <p className="serif text-xl text-bone">{c.body}</p>

                <p className="kicker mt-2 text-ash">{stamp(c.createdAt)}</p>

              </li>

            ))}

          </ul>

        )}

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Report</h2>

          <span className="kicker text-ash">Flag for review</span>

        </div>

        <form action={reportEvent} className="mt-6 flex flex-wrap items-center gap-4">

          <input

            name="reason"

            placeholder="What's wrong with this listing? (optional)"

            className="kicker flex-1 border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <button

            type="submit"

            className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

          >

            Report

          </button>

        </form>

      </section>

      <SiteFooter />

    </main>

  );

}